Android emulator에서 react application 개발하기

이번에 native application의 web view에서 react application을 실행시키는 케이스가 있어, Android emulator에서 react 개발 환경을 세팅하는 방법을 알아보았습니다.

결론

Android emulator의 경우 loopback address의 기본 설정이 10.0.2.2 가 됩니다.
따라서 Android emulator내에서 http://10.0.2.2:[port number] 로 접속 하기만 하면 끝입니다.

확인

그럼, 확인을 위해 직접 react 프로젝트를 생성 후 Android emulator에서 접속해 보도록 하겠습니다.

1.먼저 react 프로젝트를 생성합니다.

npm create vite@latest [project-name] -- --template react-ts

2.react 프로젝트의 package.json 파일 아래의 script를 수정합니다.

...
"scripts": {
  "dev": "vite"를"vite --host"로 수정합니다.
...
},
...

위의 --host or --host 0.0.0.0를 추가 후 로컬 서버를 기동하면 모든 로컬 네트워크 주소로 접근 가능해지므로 Android emulator의 10.0.2.2로부터의 접속도 가능하게 됩니다.

3.생성 후 Android emulator 를 기동 후 http://10.0.2.2:[port number]로 접속합니다.

보충

별도로 vscode 의 port forwarding이나 ngrok 과 같은 서비스를 이용하는 방법도 있습니다.
단, vscode 의 port forwarding이나 ngrok의 경우 인터넷을 통한 접속도 가능해지기 때문에 주의가 필요합니다.(외부 디바이스의 접속이 가능해지는 장점도 있습니다.)
그리고 ngrok과 같은 서비스를 이용하는 경우(ngrok무료 버전인 경우) 실행할 때마다 무작위의 domain을 제공하므로 접속이 조금 번거로워질 수 있습니다.

참고자료

• vite 서버옵션 - host